<template>
  <div class="content-body">
    <div class="content-header-logo" :style="customStyle">
      <div class="header-logo">
        <el-image class="header-logo-image" :src="themes.logo" />
      </div>
      <div class="header-user">
        <div class="header-info" @click="login">
          <div class="user-icon">
            <i class="el-icon-monitor" />
          </div>
          <div class="user-info">&nbsp;&nbsp;登&nbsp;&nbsp;录</div>
        </div>
      </div>
    </div>
    <div class="content-header" :style="bodyStyle">
      <div class="header-menu">
        <div
          v-for="(item, index) in dataList"
          :key="item.id"
          class="header-menu-li"
          :class="
            activeId === null && index === 0
              ? 'active'
              : item.id === activeId
                ? 'active'
                : ''
          "
        >
          <span
            :style="
              (activeId === null && index === 0) || mouseId === item.id
                ? customMenu
                : item.id === activeId
                  ? customMenu
                  : ''
            "
            @click="doClick(item)"
            @mouseover="mousemove(item)"
            @mouseleave="mouseleave()"
          >
            <i v-if="item.sfsxtb" :class="item.tb" />&nbsp;&nbsp;{{ item.name }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { queryGuestMenu } from '@/api/portal/user/menu';
import setImage from '@/assets/images/user.png';
export default {
  name: 'PortalGuestHeader',
  props: {
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      defaultStyle: {},
      dataList: [],
      activeId: null,
      userShow: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      tx: setImage,
      layoutStyle: {},
      customStyle: {},
      customMenu: {},
      mouseId: null,
      bodyStyle: {},
      themes: {},
      borderColor: {},
      changerColor: {},
      activeColor: {},
      inputStyle: {}
    };
  },
  watch: {
    layout: {
      handler(newName, oldName) {
        // 值发生变化时
        if (
          undefined !== newName &&
          newName !== null &&
          undefined !== newName.id &&
          newName.id !== null
        ) {
          this.initMenu();
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    themes(val, oldVal) {
      this.bodyStyle.background = val.columnGroundColor;
      this.bodyStyle.color = val.fontColor;
      this.customStyle.borderBottom = '4px solid ' + val.columnTitleGroundColor;
      this.customMenu.color = val.columnTitleFontColor;
      this.customMenu.backgroundColor = val.columnTitleGroundColor;
      this.changerColor.color = val.changeFontColor;
      this.changerColor.backgroundColor = val.changeBackGroundColor;
      this.customMenu.borderBottom = '3px solid ' + val.bkys;
      this.borderColor.border = '1px solid ' + val.columnTitleGroundColor;
      this.borderColor.background = val.columnGroundColor;
      this.activeColor.color = val.columnTitleFontColor;
      this.activeColor.background = val.columnTitleGroundColor;
      this.inputStyle.background = val.columnGroundColor;
      this.inputStyle.color = val.fontColor;
    }
  },
  created() {
    this.themes = this.$store.getters.theme;
  },
  methods: {
    userInfo(data) {
      this.userShow = data;
    },
    mousemove(item) {
      this.mouseId = item.id;
    },
    mouseleave() {
      this.mouseId = null;
    },
    initMenu() {
      queryGuestMenu({ lid: this.layout.id }).then(res => {
        const { data } = res;
        this.dataList = data.reverse();
        if (this.dataList !== null && this.dataList.length > 0) {
          // const len = this.dataList.length - 1
          this.activeId = this.dataList[0].id;
          this.$emit('callBack', this.activeId);
        }
        if (this.dataList === null || this.dataList.length === 0) {
          this.activeId = null;
          this.$emit('callBack', this.activeId);
        }
      });
    },
    login() {
      this.$router.push({ path: '/login' });
    },
    doClick(data) {
      this.activeId = data.id;
      this.$emit('callBack', this.activeId);
    }
  }
};
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
}
.content-header-logo {
  flex: 0 1 auto;
  height: 85px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
}
.content-header {
  flex: 0 1 auto;
  width: 100%;
  height: 48px;
  background-color: #ffffff;
  box-sizing: border-box;
  box-shadow: 4px 0px 2px 0px rgba(0, 0, 0, 0.1);
  display: flex;
}
.header-logo,
.header-menu {
  align-items: stretch;
  display: flex;
  flex-flow: row-reverse nowrap;
}
.header-logo {
  flex: 1 1 auto;
  justify-content: flex-end;
}
.header-user {
  width: 200px;
  flex: 0 1 auto;
  height: 60px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}
.header-search {
  margin-top: 5px;
  width: 565px;
  flex: 0 1 auto;
  height: 50px;
  display: flex;
}
.search-body {
  width: 100%;
  height: 100%;
  border: 1px solid #00a0e9;
  border-radius: 30px;
  padding: 5px 50px 5px 30px;
  box-sizing: border-box;
  position: relative;
}
.search-body input {
  border: none;
  width: 100%;
  height: 100%;
  outline: none;
  position: relative;
}
.header-input-icon {
  position: absolute;
  right: 0px;
  height: 49px;
  width: 50px;
  text-align: center;
  font-size: 20px;
  top: 0px;
  line-height: 50px;
  background-color: #00a0e9;
  border-radius: 0px 25px 25px 0px;
  color: #ffffff;
}
.header-info {
  flex: 0 1 auto;
  height: 60px;
  line-height: 60px;
  width: 90px;
  display: flex;
  flex-flow: row nowrap;
  cursor: pointer;
  justify-content: right;
}

.user-info {
  flex: 0 1 auto;
  width: 60px;
  height: 100%;
  line-height: 60px;
}
.header-menu {
  text-align: center;
  align-items: stretch;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  font-weight: bold;
}
.header-logo-image {
  height: 60px;
}
.header-menu-li {
  padding: 0px 5px;
  box-sizing: border-box;
  line-height: 48px;
  cursor: pointer;
  position: relative;
  width: 16.666%;
  font-size: 16px;
}
.header-menu-li:not(:first-child)::before {
  content: "";
  position: absolute;
  width: 2px;
  background-color: #dcdfe6;
  height: 32px;
  top: 8px;
  left: -1px;
}
.header-menu-li:hover span,
.active span {
}
.header-menu-li span {
  display: block;
  padding: 0px 10px;
  box-sizing: border-box;
}
.el-image >>> .el-image__inner {
  height: 60px;
  width: auto !important;
}
/**
 * 屏幕宽度大于1200
 */
@media screen and (min-width: 1200px) {
  .content-header {
    padding: 0px 60px;
  }
  .content-header-logo {
    padding: 10px 60px;
  }
}
/**
 * 屏幕宽度于1200
 */
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .content-header {
    padding: 0px 60px;
  }
  .content-header-logo {
    padding: 10px 60px;
  }
}

@media screen and (max-width: 1024px) {
  .content-header {
    padding: 0px 20px;
  }
  .content-header-logo {
    padding: 10px 20px;
  }
}
.user-image ::v-deep .el-image {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.user-image ::v-deep .el-image .el-image__inner {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.user-icon {
  flex: 0 1 auto;
  width: 20px;
  line-height: 60px;
  text-align: center;
}
</style>
